// components/organisms/TopIcons.styles.js
import { styled } from '@mui/material/styles';
import { AppBar, Box, Typography } from '@mui/material';
import { motion } from 'framer-motion';
import backgroundImage from 'images/backgroundLoader.gif';

// Main TopIcons styles
export const StyledAppBar = styled(AppBar)(({ isHomePage }) => ({
  background: isHomePage ? 'transparent' : undefined,
  marginTop: 0,
  boxShadow: isHomePage ? 'none' : undefined,
}));

// LogoComponent styles
export const StyledTypography = styled(Typography)(({ fontSize, darkMode, isHomePage }) => ({
  flex: '0 0 auto',
  fontWeight: 400,
  fontSize,
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  position: 'relative',
  display: 'inline-block',
  letterSpacing: '0.05em',
  padding: 0,
  margin: 0,
  height: 'auto',
  lineHeight: 1.1,
  border: 'none',
  textTransform: 'none',
  color: isHomePage ? 'white' : (darkMode ? 'white' : 'black'),
}));

export const LogoWrapper = styled(Box)(() => ({
  display: 'flex',
  alignItems: 'center',
  padding: '8px 0px',
  transition: 'all 0.3s ease',
  background: 'transparent',
}));

export const FixedLogoText = styled(motion.div)(({ darkMode, isHomePage }) => ({
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  fontSize: '1.2rem',
  fontWeight: 400,
  letterSpacing: '0.05em',
  color: '#40d47e',
  lineHeight: 1.1,
  position: 'relative',
  margin: 0,
  padding: 0,
}));

// Inline style objects
export const toolbarSx = {
  display: 'flex', 
  justifyContent: 'space-between',
  padding: { xs: '0.5rem 1rem', md: '0.5rem 2rem' },
  width: '100%'
};

export const dragHandleIconButtonSx = (darkMode) => ({
  backgroundColor: darkMode ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.8)',
  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
  transition: 'all 0.2s ease',
  '&:hover': {
    backgroundColor: darkMode ? 'rgba(40, 40, 40, 0.9)' : 'rgba(245, 245, 245, 0.9)',
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)',
  },
  '&:active': {
    transform: 'scale(0.95)',
  }
});

export const dragHandleIconSx = (darkMode) => ({
  color: darkMode ? '#fff' : '#333',
  fontSize: '1.5rem'
});

// Home page specific styles
export const homePageContainerSx = {
  height: '100vh',
  backgroundImage: `url(${backgroundImage})`,
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  width: '100%'
};

export const homePageBottomBoxSx = {
  marginBottom: '4rem',
  textAlign: 'center',
  padding: '0 1rem'
};

export const homePageH1Sx = {
  fontWeight: 'bold', 
  color: 'white',
  marginBottom: '1rem'
};

export const homePageH2Sx = {
  fontWeight: 'bold', 
  color: 'white'
};

// LogoComponent specific styles
export const fixedLogoContainerSx = {
  position: 'fixed',
  top: '10px',
  left: { xs: '10px', sm: '20px' },
  zIndex: 1300,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end'
};

export const logoLinkStyle = {
  display: 'flex',
  alignItems: 'center',
  textDecoration: 'none',
  cursor: 'pointer',
};

export const logoTextContainerSx = {
  display: 'flex', 
  flexDirection: 'column', 
  alignItems: 'flex-end'
};

export const logoTextSx = {
  lineHeight: 0.8
};

export const homeIconSx = (iconSize, darkMode, isHomePageRoute) => ({
  fontSize: iconSize,
  color: isHomePageRoute ? 'white' : (darkMode ? 'white' : 'black'),
  filter: isHomePageRoute || darkMode 
    ? 'drop-shadow(0 0 3px rgba(255, 255, 255, 0.3))' 
    : 'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',
});

export const homeIconButtonSx = (iconSize) => ({
  fontSize: iconSize,
  width: iconSize,
  height: iconSize,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  ml: '-5px',
  '&:active': {
    transform: 'scale(0.97)',
  },
});

// PortalDraghandleButton styles
export const portalButtonSx = (darkMode, additionalStyle = {}) => ({
  backgroundColor: darkMode ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.8)',
  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
  ...additionalStyle
});

export const portalDragIconSx = (darkMode) => ({
  color: darkMode ? '#fff' : '#333',
  fontSize: '1.5rem'
});

// Fixed button position styles
export const fixedButtonStyle = (buttonCoords) => ({
  position: "fixed",
  top: 10,
  right: `${buttonCoords.right}px`,
  transform: "translateZ(0)",
  willChange: "transform",
  zIndex: 1300,
});

